<template>
  <div class="hello">
    <div class="yellow" v-click-outside="event"></div>
    <div class="red" v-click-outside="event"></div>
    <div class="blue" v-click-outside="event"></div>
    <div class="black" v-click-outside="event"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    event() {
      console.log(2222)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.yellow {
  background-color: yellow;
  height: 200px;
}
.red {
  background-color: red;
  height: 200px;
}
.blue {
  background-color: blue;
  height: 200px;
}
.black {
  background-color: black;
  height: 200px;
}
</style>
